<template>
  <li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden">
    <slot>{{ showLabel }}</slot>
  </li>
</template>
<script>
  import Emitter from '../../mixins/emitter';
  const prefixCls = 'oolong-select-item';

  export default {
    name: 'oolongOption',
    componentName: 'oolong-select-item',
    mixins: [Emitter],
    props: {
      value: {
        type: [String, Number],
        required: true
      },
      label: {
        type: [String, Number]
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        selected: false,
        index: 0,    // for up and down to focus
        isFocus: false,
        hidden: false,    // for search
        searchLabel: ''    // the value is slot,only for search
      };
    },
    computed: {
      classes () {
        return [
          `${prefixCls}`,
          {
            [`${prefixCls}-disabled`]: this.disabled,
            [`${prefixCls}-selected`]: this.selected,
            [`${prefixCls}-focus`]: this.isFocus
          }
        ];
      },
      showLabel () {
        return (this.label) ? this.label : this.value;
      }
    },
    methods: {
      select () {
        //alert("oolongOption-select");
        if (this.disabled) {
          return false;
        }

        this.dispatch('oolongSelect', 'on-select-selected', this.value);
      },
      blur () {
        this.isFocus = false;
      },
      queryChange (val) {
        const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
        this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
      }
    },
    mounted () {
      this.searchLabel = this.$el.innerHTML;
      this.dispatch('oolongSelect', 'append');
      this.$on('on-select-close', () => {
        this.isFocus = false;
      });
      this.$on('on-query-change', (val) => {
        this.queryChange(val);
      });
    },
    beforeDestroy () {
      this.dispatch('oolongSelect', 'remove');
    }
  };
</script>
